<template>
	<view>
		<view class="dao_card_bg"></view>
		<view class="dao_card">
			<!-- logo -->
			<view class="dao_logo">
				<view class="logo">
					<image src="../../static/img/logo.png" mode=""></image>
				</view>
			</view>
			<!-- 详细内容 -->
			<view class="dao_conent">
				<view class="dao_conent_title">
					{{ daoInfoDetails.daoName }}
				</view>
				<!-- like展示 -->
				<view class="dao_conent_likeList">
					<view class="dao_conent_likeList_item" v-for="item in likeList" :key=item.iconName>
						<u-icon :name="item.iconName" color="var(--echo-main-color)" size="28"></u-icon>
						<view class="num">50 人</view>
					</view>
				</view>
				<view class="option">
					<view class="btn" v-for="(item, index) in btnList" :key="item.btName">
						<u-button color="var(--echo-main-color)" @click="turnPage(item.to)">{{item.btName}}</u-button>
					</view>
				</view>
				<title-component titleName="愿景" :isShowMore="false" :isShowBtn="false"></title-component>
				<view class="description">
					{{ daoInfoDetails.vision }}
				</view>
				<title-component titleName="使命" :isShowMore="false" :isShowBtn="false"></title-component>
				<view class="description">
					{{ daoInfoDetails.mission }}
				</view>
				<title-component titleName="简介" :isShowMore="false" :isShowBtn="false"></title-component>
				<view class="description">
					{{ daoInfoDetails.companyProfile }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getTenantDao,
		getMyTenantDao
	} from '@/config/daoApi.js';
	export default {
		data() {
			return {
				// 点赞收藏关注
				likeList: [{
						iconName: 'man-add',
					},
					{
						iconName: 'star',
					},
					{
						iconName: 'heart',
					}
				],
				// 按钮
				btnList: [{
						btName: '任务',
						to: 'toDoTask'
					},
					{
						btName: '提案',
						to: 'toProposal'
					},
					{
						btName: 'poap',
						to: 'toPoap'
					},
					{
						btName: '创世',
						to: 'toCommittee'
					}
				],
				// dao信息
				daoInfoDetails: {
					// dao名字
					daoName: '',
					// dao使命
					mission: '',
					// dao愿景
					vision: '',
					// 简介
					companyProfile: ''
				}
			}
		},
		onLoad({
			serialNo,
			tenantId
		}) {
			console.log('serialNo', serialNo)
			if (!serialNo) {
				console.log(213213)
				getMyTenantDao({
					tenantId
				}).then(res => {
					console.log(res)
					let {
						daoName,
						mission,
						vision,
						companyProfile
					} = res.data
					this.daoInfoDetails.daoName = daoName
					this.daoInfoDetails.mission = mission
					this.daoInfoDetails.vision = vision
					this.daoInfoDetails.companyProfile = companyProfile
				})
				return
			}
			getTenantDao({
				serialNo
			}).then(res => {
				console.log(res)
				let {
					daoName,
					mission,
					vision,
					companyProfile
				} = res.data
				this.daoInfoDetails.daoName = daoName
				this.daoInfoDetails.mission = mission
				this.daoInfoDetails.vision = vision
				this.daoInfoDetails.companyProfile = companyProfile

			})
		},
		methods: {
			turnPage(to) {
				this[to]()
			},
			toDoTask() {
				uni.switchTab({
					url: "/pages/task/task"
				});
			},
			toProposal() {
				uni.switchTab({
					url: "/pages/task/task"
				});
			},
			toPoap() {
				uni.navigateTo({
					url: "/pages/my/communityPoap"
				})
			},
			toCommittee() {
				uni.navigateTo({
					url: "/pages/home/committee/committee"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.dao_card_bg {
		height: 400rpx;
		background-color: $echo-main-color;
	}

	.dao_card {
		position: relative;
		z-index: 2;
		top: -100rpx;
		border-top-left-radius: 50rpx;
		border-top-right-radius: 50rpx;
		background-color: white;

		// logo
		.dao_logo {

			.logo {
				width: 160rpx;
				height: 160rpx;
				border-radius: 20rpx;
				overflow: hidden;
				margin: 0 auto;
				position: relative;
				top: -80rpx;


				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		// conent
		.dao_conent {
			margin: 0 40rpx;

			&_title {
				font-size: $echo-font-size-title;
				font-weight: bold;
				text-align: center;
				margin-top: -20rpx;
			}

			&_likeList {
				margin: 40rpx;
				display: flex;
				justify-content: center;

				&_item {
					display: flex;
					width: 30%;
					align-items: center;
					justify-content: center;

					.num {
						font-size: $echo-font-size-conent;
						margin-left: 16rpx;
					}
				}
			}

			.option {
				margin: 40rpx;
				display: flex;
				justify-content: space-around;

				.btn {
					width: 25%;
					font-size: 12px;
					background-color: $echo-main-color;
				}
			}

			.description {
				padding: 0 30rpx;
				line-height: 60rpx;
				font-size: $echo-font-size-conent;

			}
		}
	}
</style>
